@charset "utf-8";

//样式里的l,m,r,t,b分别代表左，中，右，上，下
//布局
main {
  flex-direction: column;

  .t, .b, .t-l-t, .t-l-b, .t-l, .t-r, .chart-box {
    //outline: 1px dashed orange;
  }

}

// 上面样式
.t {
  flex: 0 0 59%;
  display: flex;
  //padding: 3.75rem 0 0 3.75rem;
  .t-l {
    flex: 0 0 36%;
    margin-top: 1.875rem;

    .t-l-t {
      margin-bottom: 3.375rem;
      ul {
        display: flex;
        justify-content: space-between;
        margin: 2rem .25rem 0;
        li {
          display: inline-block;
          h4 {
            font-size: .75rem;
            i {
              margin-right: .25rem;
              font-size: 1rem;
              color: #2377fe;
            }
          }
          div {
            text-align: center;
            font-size: 1.875rem;
            margin-left: 1rem;
            span {
              line-height: 2.875rem;
            }
            i {
              margin-left: -.5rem;
              font-size: 1.5rem;
              color: #e5225a;
            }
          }
        }
      }
    }

    .t-l-b {
      .chart-box {
        height: 15rem;
      }
    }
  }
  .t-r{
    flex: 0 0 64%;
    position: relative;
    .chart-box{
      position: absolute;
      left: -10%;
      //top: 5%;
      width: 120%;
      height: 120%;
    }
  }
}


// 右侧样式
.b {
  //flex: 0 0 40%;
  ul{
    display: flex;
    justify-content: space-around;
    li{
      position: relative;
      display: inline-block;
      width: 16rem;
      h4{
        position: absolute;
        top: 2rem;
        left: 1rem;
        font-size: .875rem;
        letter-spacing: .125rem;
        &:before{
          content: '';
          display: inline-block;
          width: 9px;
          height: 9px;
          vertical-align: middle;
          background: #2377fe;
          line-height: 22px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%;
          margin-right: 0.8rem;
        };
      }
      .chart-box{
        height: 16rem;
      }
    }
  }
}
